import {
  CSSProperties,
  memo,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import type { FC, PropsWithChildren } from 'react';
import { Button, Cascader, Form, FormInstance, Input, InputNumber } from 'antd';
import { DeleteTwoTone, EditTwoTone, UploadOutlined } from '@ant-design/icons';
import {
  labelCol,
  validateMessage,
  wrapperCol,
} from '@/components/AddressFormModal';
import RichEdit from '@/components/RichEdit';
import UploadImage from '@/components/UploadImage';

const fieldNames = { label: 'name', value: 'id', children: 'children' };

const EditGoodsForm: FC<
  PropsWithChildren<{
    onFinish: (value: any) => void;
    data?: API.CategoryListStruct[];
    defaultValue?: API.GoodsStruct;
  }>
> = ({ onFinish, data, defaultValue }) => {
  const numberStyle = { width: '100%' };

  return (
    <Form
      validateMessages={validateMessage}
      layout={'vertical'}
      initialValues={defaultValue}
      onFinish={onFinish}
    >
      <Form.Item
        name={'category_id'}
        label={'图书分类'}
        rules={[{ required: true }]}
      >
        <Cascader options={data} fieldNames={fieldNames} />
      </Form.Item>
      <Form.Item name={'title'} label={'图书名称'} rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item
        name={'description'}
        label={'图书描述'}
        rules={[{ required: true }]}
      >
        <Input placeholder={'建议格式：出版社/作者'} />
      </Form.Item>
      <Form.Item name={'price'} label={'价格'} rules={[{ required: true }]}>
        <InputNumber style={numberStyle} addonBefore={'￥'} />
      </Form.Item>
      <Form.Item
        name={'discount'}
        initialValue={defaultValue?.discount ? undefined : 1}
        label={'折扣'}
        rules={[{ required: true }]}
      >
        <InputNumber min={0} style={numberStyle} step={0.05} addonAfter={'%'} />
      </Form.Item>
      <Form.Item name={'stock'} label={'库存'} rules={[{ required: true }]}>
        <InputNumber style={numberStyle} />
      </Form.Item>

      {/*图片上传*/}
      <UploadImage name={'cover'} label={'图书封面'}>
        <Button icon={<UploadOutlined />}>上传图片</Button>
      </UploadImage>

      <RichEdit
        label={'图书详细信息'}
        name={'details'}
        className={'h-[50vh] pb-16'}
      />

      <div className={''}>
        <Button type={'primary'} block htmlType={'submit'}>
          提交
        </Button>
      </div>
    </Form>
  );
};

export default memo(EditGoodsForm);
